<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

	<script src="js/jquery-1.11.0.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/login.css">
    <title>注册页面</title>
</head>
<body>
        <div style="text-align: center;" id="title">
            <p>新用户注册</p>
            <p>USER REGISTER</p>
        </div>
    <div>
        <div>
            <!-- 登录错误信息提示 -->
            <div id="errorMsg" class="alert alert-danger"  style="text-align: center;"></div>      
        </div>
        <div id="register">
            <form action="" id="registerForm">
                <table class="table">
                    <tr>
                        <td >
                            <label for="username">用户名</label>
                        </td>
                        <td >
                            <input type="text" id="username" name="username" placeholder="请输入账号">
                        </td>
                    </tr>
                    <tr>
                        <td   >
                            <label for="password">密码</label>
                        </td>
                        <td >
                            <input type="text" id="password" name="password" placeholder="请输入密码">
                        </td>
                    </tr>
                    <tr>
                        <td   >
                            <label for="email">Email</label>
                        </td>
                        <td >
                            <input type="text" id="email" name="email" placeholder="请输入Email">
                        </td>
                    </tr>
                    <tr>
                        <td   >
                            <label for="name">姓名</label>
                        </td>
                        <td >
                            <input type="text" id="name" name="name" placeholder="请输入真实姓名">
                        </td>
                    </tr>
                    <tr>
                        <td   >
                            <label for="telephone">手机号</label>
                        </td>
                        <td >
                            <input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号">
                        </td>
                    </tr>
                    <tr>
                        <td   >
                            <label for="sex">性别</label>
                        </td>
                        <td class="td_right gender">
                            <input type="radio" id="sex" name="sex" value="男" checked> 男
                            <input type="radio" name="sex" value="女"> 女
                        </td>
                    </tr>
                    <tr>
                        <td   >
                            <label for="birthday">出生日期</label>
                        </td>
                        <td >
                            <input type="date" id="birthday" name="birthday" placeholder="年/月/日">
                        </td>
                    </tr>
                    <tr>
                        <td   >
                            <label for="check">验证码</label>
                        </td>
                        <td class="td_right check">
                            <input type="text" id="check" name="check" class="check">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <img src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)">
                            <script type="text/javascript">
                                //图片点击事件
                                function changeCheckCode(img) {
                                    img.src="checkCode?"+new Date().getTime();
                                }
                            </script>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2"  class="td_right check"> 
                            <input type="submit" id="submit" class="submit" value="注册">
    
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>

        <script>
			$("#registerForm").submit(function() {
				$.ajax({
					url:"regist",
					type:"post",
					data: $("#registerForm").serialize(), // 调用js的表单序列化方法 , 将表单的内容转换为字符串
					success: function(data) {
                        alert(data);
                        data = JSON.parse(data);
                        alert(data.code);
						if (data.code == 200) {
							location.href = "login.html";
						}else {
							$("#errorMsg").html(data.msg);
						}
					}
				});
				return false;
				
			}) ;
			// $("#registerForm").submit(function() {

			// 	return false ;
			// });            
        </script>
    </div>
    <div id="loginDiv">
        已有账号<a href="login.html">点击登录</a>
    </div>
</body>
</html>